Titles and navigation

7 files changed, 47 insertions, 14 deletions

diff --git a/src/app/groups/[groupId]/balances/page.tsx b/src/app/groups/[groupId]/balances/page.tsx
index ab2c582..31dbf63 100644
--- a/src/app/groups/[groupId]/balances/page.tsx
+++ b/src/app/groups/[groupId]/balances/page.tsx
@@ -9,8 +9,13 @@ import {
 } from '@/components/ui/card'
 import { getGroup, getGroupExpenses } from '@/lib/api'
 import { getBalances, getSuggestedReimbursements } from '@/lib/balances'
+import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Balances',
+}
+
 export default async function GroupPage({
   params: { groupId },
 }: {
diff --git a/src/app/groups/[groupId]/edit/page.tsx b/src/app/groups/[groupId]/edit/page.tsx
index f902428..1fcf225 100644
--- a/src/app/groups/[groupId]/edit/page.tsx
+++ b/src/app/groups/[groupId]/edit/page.tsx
@@ -1,8 +1,13 @@
 import { GroupForm } from '@/components/group-form'
 import { getGroup, updateGroup } from '@/lib/api'
 import { groupFormSchema } from '@/lib/schemas'
+import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Settings',
+}
+
 export default async function EditGroupPage({
   params: { groupId },
 }: {
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
index 0623f50..188d08f 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
+++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
@@ -1,8 +1,13 @@
 import { ExpenseForm } from '@/components/expense-form'
 import { deleteExpense, getExpense, getGroup, updateExpense } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
+import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Edit expense',
+}
+
 export default async function EditExpensePage({
   params: { groupId, expenseId },
 }: {
diff --git a/src/app/groups/[groupId]/expenses/create/page.tsx b/src/app/groups/[groupId]/expenses/create/page.tsx
index 3a730d5..e603e59 100644
--- a/src/app/groups/[groupId]/expenses/create/page.tsx
+++ b/src/app/groups/[groupId]/expenses/create/page.tsx
@@ -1,8 +1,13 @@
 import { ExpenseForm } from '@/components/expense-form'
 import { createExpense, getGroup } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
+import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Create expense',
+}
+
 export default async function ExpensePage({
   params: { groupId },
 }: {
diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
index 1ba7df7..907a37a 100644
--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -66,7 +66,7 @@ export function ExpenseList({
   ) : (
     <p className="px-6 text-sm py-6">
       Your group doesn’t contain any expense yet.{' '}
-      <Button variant="link" asChild className="-m-3">
+      <Button variant="link" asChild className="-m-4">
         <Link href={`/groups/${groupId}/expenses/create`}>
           Create the first one
         </Link>
diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx
index 48f355b..0ec5086 100644
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -9,9 +9,14 @@ import {
 } from '@/components/ui/card'
 import { getGroup, getGroupExpenses } from '@/lib/api'
 import { Plus } from 'lucide-react'
+import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Expenses',
+}
+
 export default async function GroupExpensesPage({
   params: { groupId },
 }: {
diff --git a/src/app/groups/[groupId]/layout.tsx b/src/app/groups/[groupId]/layout.tsx
index 5b99dd2..5fbd7cb 100644
--- a/src/app/groups/[groupId]/layout.tsx
+++ b/src/app/groups/[groupId]/layout.tsx
@@ -1,31 +1,39 @@
 import { GroupTabs } from '@/app/groups/[groupId]/group-tabs'
 import { SaveGroupLocally } from '@/app/groups/[groupId]/save-recent-group'
-import { Button } from '@/components/ui/button'
 import { getGroup } from '@/lib/api'
-import { ChevronLeft } from 'lucide-react'
+import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { PropsWithChildren } from 'react'
 
+type Props = {
+  params: {
+    groupId: string
+  }
+}
+
+export async function generateMetadata({
+  params: { groupId },
+}: Props): Promise<Metadata> {
+  const group = await getGroup(groupId)
+
+  return {
+    title: {
+      default: group?.name ?? '',
+      template: `%s · ${group?.name} · Spliit`,
+    },
+  }
+}
+
 export default async function GroupLayout({
   children,
   params: { groupId },
-}: PropsWithChildren<{
-  params: { groupId: string }
-}>) {
+}: PropsWithChildren<Props>) {
   const group = await getGroup(groupId)
   if (!group) notFound()
 
   return (
     <>
-      <div className="mb-4 flex justify-between">
-        <Button variant="ghost" asChild>
-          <Link href="/groups">
-            <ChevronLeft className="w-4 h-4 mr-2" /> Back to recent groups
-          </Link>
-        </Button>
-      </div>
-
       <h1 className="font-bold text-2xl mb-4">
         <Link href={`/groups/${groupId}`}>{group.name}</Link>
       </h1>